<template>
	<view class="card-container" @click="$emit('click')">
		<view :class="['card-wrap', size ? size : '']">
			<view class="checkbox-wrap" v-if="checkType === 'multiple'">
				<checkbox-group @change="checkboxChange($event, item)">
					<label>
						<checkbox
							:checked="
								checkedList.some(
									(check) => check[uuid] === item[uuid],
								)
							"
						/>
					</label>
				</checkbox-group>
			</view>

			<view :class="['header', subTitle ? '' : 'noBg']" v-if="title">
				<view class="title">
					<text>{{ title }}</text>
				</view>
			</view>
			<view :class="['card-header', size ? size : '']">
				<slot name="cardHeader"></slot>
			</view>
			<view :class="['card-body', size ? size : '']">
				<slot name="cardBody"></slot>
			</view>
			<view :class="['card-footer', size ? size : '']">
				<slot name="cardFooter"></slot>
			</view>
			<view class="operator">
				<slot name="operator"></slot>
			</view>
			<view class="card-custom">
				<slot name="cardCustom"></slot>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'HeaderCard',
	props: {
		title: {
			type: String,
			default: '',
		},
		// 标题背景模式: true->主题色 false->无背景色
		subTitle: {
			type: Boolean,
			default: true,
		},
		size: {
			type: String,
			default: '',
		},
		rowKey: {
			type: String,
			default: 'id',
		},
		itemData: {
			type: Object,
			default: () => ({}),
		},
		checkType: {
			type: String,
			default: '',
		},
	},
	data() {
		return {
			// TODO
			checkedList: [],
		};
	},
	methods: {
		// TODO
		checkboxChange() {
			if (
				this.checkedList.some(
					(check) =>
						check[this.rowKey] === this.itemData[this.rowKey],
				)
			) {
				const temMapArr = this.checkedList.filter(
					(p) => p[this.rowKey] !== this.itemData[this.rowKey],
				);
				this.checkedList = temMapArr;
			} else {
				this.checkedList = [...this.checkedList, this.itemData];
			}
			this.$emit('checkedEvent', this.checkedList);
		},
	},
};
</script>

<style lang="scss" scoped>
.card-container {
	padding: 6px;
	.card-wrap {
		position: relative;
		padding: 0 6px;
		background: #ffffff;
		border-radius: 4px;
		border: 1px solid #e0e0e0;
		&.large {
			background: #ebeffd;
			padding: 0;
		}
		.checkbox-wrap {
			padding: 8px 0;
			::v-deep .uni-checkbox-input {
				width: 20px;
				height: 20px;
			}
		}
		.header {
			padding: 8px 16px;
			padding-bottom: 0;
			background: #ebeffd;
			display: flex;
			align-items: center;
			justify-content: space-between;
			&.noBg {
				background: none;
			}
			.title {
				position: relative;
				font-weight: 700;
				font-size: 14px;
				::before {
					content: '';
					height: 20px;
					width: 4px;
					background: var(--primary-color);
					position: absolute;
					left: -10px;
					top: 0;
				}
			}
		}
		.card-body {
			padding: 8px;
			padding-top: 0;
			&.large {
				border-radius: 0;
				border: none;
			}
		}
		.operator {
			position: absolute;
			right: 6px;
			top: 100px;
		}
		.card-footer {
			padding: 6px;
			padding-bottom: 0;
		}
	}
}
</style>
